

import React, { Component, FC, useEffect } from 'react';
import PropTypes from 'prop-types';

// 1. 安装引入 
import Swiper from "swiper"

export const Myswipe:FC<any> = ({
    id,
    children,
    options,
    style
})=>{
    useEffect(()=>{
        console.log("children")
        
        // 3. 插件实例化 
        const mySwiper = new Swiper('#'+id, {
            ...options,
            observer:true 
        })
    })
    return (
        // 2. 满足静态结构 
        <div className='swiper-container' style={style} id={id} >
            <div className='swiper-wrapper' >
                {children} 
            </div>
        </div>
    );
}
Myswipe.defaultProps   = {
    id:'thisSwiper',
    options:{

    }
}
Myswipe.propTypes  = {
    id:PropTypes.string ,
    options:PropTypes.object 
}

export const MyswipeItem:FC<any> = ({ children,style  })=>{
    return (
        <div className="swiper-slide" >
              {children}
        </div>
    )
}